<template>
	<view class="order">
		<view class="orderHead">
			<view class="orderHead-main">
				<view class="orderHead-main-title1">
					累计订购额(元)
				</view>
				<view class="orderHead-main-title2">
					{{factoryMoney}}
				</view>
			</view>
		</view>
		<view class="orderMain">
			<view class="orderMain-nav">
				<view class="orderMain-nav-box font_blod" @click="cli_nav(item)"
					:class="[index_nav == index? 'orderMain-nav-box-ok': '']" v-for="(item, index) of li_nav"
					:key="index">
					<text>{{item.name}}</text>
					<image v-if="item.index == index_nav" class="orderMain-nav-box-img"
						src="../../../static/manufacturers/border_btm.png" mode="">
					</image>
				</view>
			</view>
			<view v-if="list && list.length > 0" class="orderMain-list">
				<view class="orderMain-list-notice">
					<uni-notice-bar class="orderMain-list-notice-bar" speed="50" show-icon scrollable color="#A43561" background-color="#ffffff"
						text="发货前请与订购方核实收货地址，是否送货上门！" />
				</view>
				<scroll-view class="scroll-view_H" :lower-threshold=30 scroll-y="true" @scrolltolower="lower">
					<view class="orderMain-list-li" v-for="(item, index) of list" :key="index">
						<view class="orderMain-list-li-one">
							<text class="orderMain-list-li-one-txt1">{{item.createTime}}</text>
							<text class="orderMain-list-li-one-txt2 font_blod"
								:class="[item.orderState == 1? 'orderMain-list-li-one-txt2-two': '',item.orderState == 2? 'orderMain-list-li-one-txt2-three': '']">{{item.orderState | changeorderState}}</text>
						</view>
						<view class="orderMain-list-li-two">
							<text class="orderMain-list-li-two-txt1 font_blod">{{item.orderName}}</text>
							<image class="orderMain-list-li-two-img" src="../../../static/manufacturers/phone_2.png"
								mode=""></image>
							<text class="orderMain-list-li-two-txt2">{{item.orderPhone}}</text>
						</view>
						<view class="orderMain-list-li-three">
							{{item.orderAddress}}
						</view>
						<view class="orderMain-list-li-four">
							<view class="orderMain-list-li-four-btn1 font_blod font_blod"
								v-if="item.orderState != 1 && item.orderState != 2" @click="cli_goDetails(item)">
								查看详情
							</view>
							<view v-if="item.orderState == 1" class="orderMain-list-li-four-btn2 font_blod"
								@click="cli_gook(item.id)">
								去接单
							</view>
							<view v-if="item.orderState == 2" class="orderMain-list-li-four-btn2 font_blod"
								@click="cli_goplay(item.id)">
								生成发货单
							</view>

						</view>
					</view>
				</scroll-view>
			</view>
			<view v-else class="orderMain-list">
				<view class="yPopNone">
					<image class="yPopNoneImg" src="https://www.zzzsyh.com/applets/agent/factory/23.png" mode="">
					</image>
					<view class="yPopNoneTxt">
						暂无订单~
					</view>
				</view>
			</view>
		</view>

		<!-- 底部导航 -->
		<view class="tabbarBox">
			<view class="tabbarBox-li">
				<image class="tabbarBox-li-img" src="../../../static/manufacturers/tab1.png" mode=""></image>
				<text class="tabbarBox-li-txt font_blod">
					订单管理
				</text>
			</view>
			<view class="tabbarBox-li" @click="cli_go_subsidy">
				<image class="tabbarBox-li-img" src="../../../static/manufacturers/tab2.png" mode=""></image>
				<text class="tabbarBox-li-txt font_blod">
					补助金
				</text>
			</view>
			<view class="tabbarBox-li" @click="cli_go_mycenter">
				<image class="tabbarBox-li-img" src="../../../static/manufacturers/tab3.png" mode=""></image>
				<text class="tabbarBox-li-txt font_blod">
					我的
				</text>
			</view>
		</view>
	</view>
</template>

<script>
	import allapi from '../api/index.js'
	export default {
		data() {
			return {
				factoryId: uni.getStorageSync('id_factory'),
				factoryMoney: '',
				barheight: '',
				li_nav: [{
					name: '全部订单',
					index: '0'
				}, {
					name: '待接单',
					index: '1'
				}, {
					name: '待发货',
					index: '2'
				}, {
					name: '已发货',
					index: '3'
				}],
				index_nav: 0,
				list: [],
				pageNum: 1, // 分页
				getrefresh: true, // 强制刷新页面
				isShow: true,
			}
		},
		onShow() {
			// 获取产品订单列表
			this.pageInit()
			// 获取厂家首页累计金额
			this.getMoneyAllByFactoryId()
		},
		mounted() {
			// 分享
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline'],
				path: '/pages/manufacturers/login/login'
			})
		},
		methods: {
			// 初始化
			pageInit() {
				this.isShow = true
				this.pageNum = 1
				this.list = []
				this.getFactoryOrderList(this.index_nav)
			},
			// list上拉加载
			lower(e) {
				let isShow = this.isShow
				if (isShow) {
					this.pageNum = this.pageNum + 1
					this.getFactoryOrderList(this.index_nav)
				}
			},
			// 点击切换nav
			cli_nav(item) {
				this.index_nav = item.index
				this.list = []
				this.pageNum = 1
				this.getFactoryOrderList(this.index_nav)
			},
			// 点击跳转详情
			cli_goDetails(item) {
				uni.navigateTo({
					url: '/pages/manufacturers/details/details?id=' + item.id
				});
			},
			// 跳转到生成发货单
			cli_goplay(id) {
				uni.setStorage({
					key: 'id_factory_order',
					data: id,
					success: function() {
						uni.navigateTo({
							url: '/pages/manufacturers/deliver/deliver'
						});
					}
				});
			},
			// 去接单
			cli_gook(id) {
				// uni.navigateTo({
				//     url: '/pages/manufacturers/details/details?id=' + id
				// });
				let _that = this
				uni.request({
					url: allapi.generateDeliverOrder,
					data: {
						id: id
					},
					success: (res) => {
						console.log(res);
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						this.cli_goplay(id)
					}
				})
			},
			// 获取产品订单列表
			getFactoryOrderList(orderState) {
				let _that = this
				uni.request({
					url: allapi.getFactoryOrderList,
					data: {
						factoryId: this.factoryId,
						orderState: orderState,
						pageNum: this.pageNum,
						pageSize: 10
					},
					success: (res) => {
						console.log(res);
						let dat = res.data.data
						let alllist = this.list
						let allmsg = []
						if (dat.length > 0) {
							this.isShow = true
							allmsg = alllist.concat(dat)
							this.list = allmsg
						} else {
							this.isShow = false
						}
					}
				})
			},
			// 获取厂家首页累计金额
			getMoneyAllByFactoryId() {
				uni.request({
					url: allapi.getMoneyAllByFactoryId,
					data: {
						factoryId: this.factoryId
					},
					success: (res) => {
						console.log('金额', res);
						this.factoryMoney = res.data.data
					}
				})
			},
			// 跳转补助金
			cli_go_subsidy() {
				uni.redirectTo({
					url: '/pages/manufacturers/subsidy/subsidy'
				})
			},
			// 跳转我的
			cli_go_mycenter() {
				uni.redirectTo({
					url: '/pages/manufacturers/mycenter/mycenter'
				})
			},
			// 或许系统屏幕高度
			get_uni_head() {
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				this.barheight = menuButtonInfo.bottom + 'px'
			}
		},
		filters: {
			changeorderState(val) {
				if (val == 1) {
					return '待接单'
				} else if (val == 2) {
					return '待发货'
				} else if (val == 3) {
					return '已发货'
				} else if (val == 4) {
					return '已发货'
				}
			}
		}
	}
</script>

<style scoped>
	.order {
		position: absolute;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.tabbarBox {
		left: 0;
		bottom: 0;
		/* position: fixed; */
		width: 100%;
		height: 120rpx;
		background: #FFFFFF;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tabbarBox-li {
		width: 200rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.tabbarBox-li-img {
		width: 60rpx;
		height: 60rpx;
	}

	.tabbarBox-li-txt {
		font-size: 24rpx;
		color: #666666;
	}

	.orderHead {
		height: 364rpx;
		background-image: url('https://www.zzzsyh.com/applets/agent/factory/8.png');
		background-size: 100%;
		background-repeat: no-repeat;
		padding-top: 0.1rpx;
	}

	.orderHead-main {
		margin-top: 184rpx;
		text-align: center;
	}

	.orderHead-main-title1 {
		font-size: 24rpx;
		font-weight: 400;
		color: #FFFFFF;
	}

	.orderHead-main-title2 {
		font-size: 72rpx;
		color: #FFFFFF;
		font-weight: 800;
	}

	.orderMain {
		border-top-left-radius: 25rpx;
		border-top-right-radius: 25rpx;
		margin-top: -48rpx;
		height: 124rpx;
		background: #f3f5f7;
		padding-top: 0.1rpx;
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.orderMain-nav {
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top: 20rpx;
	}

	.orderMain-nav-box {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		line-height: 72rpx;
		color: #666;
		font-size: 28rpx;
	}

	.orderMain-nav-box-ok {
		color: #5DD4D6;
	}

	.orderMain-nav-box-img {
		width: 60rpx;
		height: 8rpx;
	}

	.orderMain-list {
		flex: 1;
		overflow: auto;
		/* background: red; */
	}
	.orderMain-list-notice {
		margin: 0 24rpx;
		border-radius: 8rpx;
		overflow: hidden;
		margin-top: 20rpx;
	}
	.orderMain-list-notice-bar {
		border-radius: 8rpx;
	}
	.scroll-view_H {
		height: 100%;
	}

	.orderMain-list-li {
		margin: 16rpx 24rpx;
		background: #FFFFFF;
		padding: 24rpx;
		border-radius: 16rpx;
	}

	.orderMain-list-li-one {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2rpx solid #EEEEEE;
		padding-bottom: 16rpx;
	}

	.orderMain-list-li-one-txt1 {
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
	}

	.orderMain-list-li-one-txt2 {
		font-size: 28rpx;
		color: #333333;
	}

	.orderMain-list-li-one-txt2-two {
		color: #FF8848;
	}

	.orderMain-list-li-one-txt2-three {
		color: #FFB548;
	}

	.orderMain-list-li-two {
		margin-top: 24rpx;
		display: flex;
		align-items: center;
	}

	.orderMain-list-li-two-txt1 {
		font-size: 32rpx;
		color: #333333;
	}

	.orderMain-list-li-two-img {
		width: 32rpx;
		height: 32rpx;
		margin: 0 12rpx;
	}

	.orderMain-list-li-two-txt2 {
		color: #5DD4D6;
		font-size: 28rpx;
	}

	.orderMain-list-li-three {
		color: #666666;
		font-size: 28rpx;
		line-height: 40rpx;
		margin-top: 24rpx;
	}

	.orderMain-list-li-four {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-top: 24rpx;
	}

	.orderMain-list-li-four-btn1 {
		padding: 18rpx 44rpx;
		border: 2rpx solid #666666;
		border-radius: 35rpx;
		font-size: 24rpx;
		color: #666666;
	}

	.orderMain-list-li-four-btn2 {
		font-size: 24rpx;
		color: #FFFFFF;
		padding: 18rpx 44rpx;
		background: #5DD4D6;
		border-radius: 35rpx;
		margin-left: 32rpx;
	}
</style>
